import React, { useState } from 'react';
import { Modal, Form, Input, Select, Button, Space, message } from 'antd';
import appService from '@/api/services/appService';
import { SvgIcon } from '@/components/icon';

interface ImportAppModalProps {
  visible: boolean;
  onCancel: () => void;
  onOk: () => void;
  categoryList: { label: string; value: string }[];
  systemList: { label: string; value: string }[];
  selectedCategory: string;
  handleCategorySearch: (value: string) => void;
  handleSystemSearch: (value: string) => void;
  dropdownCategoryStyle: React.CSSProperties;
  dropdownSystemStyle: React.CSSProperties;
}

const ImportAppModal: React.FC<ImportAppModalProps> = ({
  visible,
  onCancel,
  onOk,
  categoryList,
  systemList,
  selectedCategory,
  handleCategorySearch,
  handleSystemSearch,
  dropdownCategoryStyle,
  dropdownSystemStyle,
}) => {
  const [form] = Form.useForm();

  const handleImport = async (values: any) => {
    console.log(values);
    if (!values?.['name'].trim()) {
      message.error('业务名称不能为空');
      return;
    }
    if (!values?.['web_url'].trim() && !values?.['app_url'].trim()) {
      message.error('业务地址不能为空');
      return;
    }

    await appService.extensionCreate(values);
    onOk();
    message.success('导入业务成功');
    form.resetFields();
  };

  return (
    <Modal title="导入业务" open={visible} onCancel={onCancel} footer={null}>
      <Form form={form} onFinish={handleImport} layout="vertical">
        <Form.Item
          name="name"
          label="业务名称"
          rules={[{ required: true, message: '请输入业务名称' }]}
        >
          <Input className="!rounded-button" />
        </Form.Item>
        {/* <Form.Item
          name="web_url"
          label="业务网址（PC端）"
        >
          <Input className="!rounded-button" />
        </Form.Item>
        <Form.Item
          name="app_url"
          label="业务网址（移动端）"
        >
          <Input className="!rounded-button" />
        </Form.Item> */}
        <Form.Item
          name="name"
          label="业务网址（必须填写其中一项）"
          rules={[{ required: true, message: '请输入业务网址' }]}
        >
          <Form.Item
            name="web_url"
            style={{ marginTop: '16px' }}
            label={
              <div className="flex items-center gap-2">
                <SvgIcon icon="mingcute--airplay-line" size={20}></SvgIcon> 添加PC端
              </div>
            }
          // rules={[{ required: true, message: '请输入业务网址' }]}
          >
            <Input className="!rounded-button" />
          </Form.Item>
          <Form.Item
            name="app_url"
            style={{ marginBottom: '0px' }}
            label={
              <span className="inset-6 flex items-center gap-2">
                <SvgIcon icon="mingcute--cellphone-2-line" size={20}></SvgIcon>{' '}
                <span>添加移动端</span>
              </span>
            }
          // rules={[{ required: true, message: '请输入业务网址' }]}
          >
            <Input className="!rounded-button" />
          </Form.Item>
        </Form.Item>

        <Form.Item
          name="category"
          label="所属部门"
          rules={[{ required: true, message: '请选择或输入部门' }]}
        >
          <Select
            showSearch
            allowClear
            placeholder="请选择或输入部门"
            onBlur={(e) => {
              e.target?.value && form.setFieldValue('category', e.target?.value);
            }}
            options={categoryList}
            onSearch={handleCategorySearch}
            dropdownStyle={dropdownCategoryStyle}
          ></Select>
        </Form.Item>

        <Form.Item
          name="system"
          label="所属系统"
          rules={[{ required: true, message: '请选择或输入系统' }]}
        >
          <Select
            showSearch
            allowClear
            placeholder="请选择或输入系统"
            onBlur={(e) => {
              e.target?.value && form.setFieldValue('system', e.target?.value);
            }}
            options={systemList}
            onSearch={handleSystemSearch}
            dropdownStyle={dropdownSystemStyle}
          ></Select>
        </Form.Item>
        <Form.Item
          name="description"
          label="业务介绍"
          rules={[{ required: true, message: '请输入业务介绍' }]}
        >
          <Input.TextArea rows={4} className="!rounded-button" />
        </Form.Item>
        <Form.Item className="mb-0 text-right">
          <Space>
            <Button onClick={onCancel} className="!rounded-button">
              取消
            </Button>
            <Button type="primary" htmlType="submit" className="!rounded-button">
              确定
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default ImportAppModal;
